<template>
  <div>
    <Cascader :data="typeData"
              v-model="selectedTypeData"
              trigger="hover"
              class="type-select"></Cascader>
    <Button shape="circle" icon="ios-search" @click="search"></Button>
    <Table :columns="columns"
             :rowKey="record => record.blogContentRefid"
             :dataSource="data"
             :pagination="pagination"
             :loading="loading"
             @change="handleTableChange">
<!--      <template slot="name" slot-scope="name">-->
<!--        {{name.first}} {{name.last}}-->
<!--      </template>-->
    </Table>

  </div>
</template>

<script>
import { Cascader, Button } from 'view-design'
import { Table } from 'ant-design-vue'
import { GetMainSubTypes, GetAllBlogTitleBySubRefid, GetBlogTitleInfoByPaging } from '../../api/getData'

export default {
  name: 'blogManage',
  components: {
    Cascader,
    Button,
    Table
  },
  data () {
    return {
      selectedTypeData: [],
      typeData: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'gugong',
              label: '故宫'
            },
            {
              value: 'tiantan',
              label: '天坛'
            },
            {
              value: 'wangfujing',
              label: '王府井'
            }
          ]
        },
        {
          value: 'jiangsu',
          label: '江苏',
          children: [
            {
              value: 'nanjing',
              label: '南京',
              children: [
                {
                  value: 'fuzimiao',
                  label: '夫子庙'
                }
              ]
            },
            {
              value: 'suzhou',
              label: '苏州',
              children: [
                {
                  value: 'zhuozhengyuan',
                  label: '拙政园'
                },
                {
                  value: 'shizilin',
                  label: '狮子林'
                }
              ]
            }
          ]
        }
      ],
      titleList: [],
      data: [],
      pagination: {},
      loading: false,
      columns: [{
        title: 'blogTitle',
        dataIndex: 'blogTitle',
        sorter: true,
        width: '20%',
        scopedSlots: { customRender: 'name' }
      }, {
        title: 'createTime',
        dataIndex: 'createTime'
      }]
    }
  },
  mounted () {
    this.getAllBlogMainSubTypes()
    let params = {
      pageSize: 10,
      page: 1,
      sortField: '',
      desc: false
    }
    this.fetch(params)
  },
  methods: {
    handleTableChange (pagination, filters, sorter) {
      window.console.log(pagination)
      window.console.log(filters)
      window.console.log(sorter)
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      this.fetch({
        pageSize: pagination.pageSize,
        page: pagination.current,
        sortField: '',
        desc: sorter.order === 'desc'
      })
    },
    fetch (params = {}) {
      this.loading = true
      GetBlogTitleInfoByPaging(params, (result) => {
        const pagination = { ...this.pagination }
        pagination.total = 200
        this.loading = false
        this.data = result.data
        this.pagination = pagination
      })
    },
    search () {
      let refid = this.selectedTypeData[1]
      let param = { blogContentForeignKey: refid }
      GetAllBlogTitleBySubRefid(param, (result) => {
        if (result.errorCode === 'OK') {
          this.titleList = result.data
          for (let i = 0; i < this.titleList.length; i++) {
            this.titleList[i].name = i
          }
        }
      })
    },
    getAllBlogMainSubTypes () {
      GetMainSubTypes({}, result => {
        if (result.errorCode === 'OK') {
          this.typeData = []
          for (let i = 0; i < result.data.length; i++) {
            let item = result.data[i]
            let hasExist = false
            let existIndex = 0
            for (let j = 0; j < this.typeData.length; j++) {
              if (this.typeData[j].value === item.blogMainTypeRefid) {
                hasExist = true
                existIndex = j
                break
              }
            }
            if (hasExist) {
              if (this.typeData[existIndex].children === null) {
                this.typeData[existIndex].children = []
              }
              this.typeData[existIndex].children.push(
                { value: item.blogSubTypeRefid, label: item.subTypeName }
              )
            } else {
              this.typeData.push(
                {
                  value: item.blogMainTypeRefid,
                  label: item.mainTypeName,
                  children: [ { value: item.blogSubTypeRefid, label: item.subTypeName } ]
                }
              )
            }
          }
        }
      })
    }
  }
}
</script>

<style scoped>
  .blog-type {
    padding-bottom: 20px;
    height: 100px;
  }
</style>
